<template>
  <div class="rank">
    <div class="list" v-for="item in topList" :key="item.title">
      <h3>{{ item.title }}</h3>
      <div  class="rank-list" v-for="itemList in item.list" :key="itemList.topId"
      @click="selectRankList(itemList)">
      <div class="item">
        <h4>{{ itemList.label }}</h4>
        <ul>
            <li v-for="(musicItem,i) in itemList.song" :key="musicItem.songId" >
                <span>{{i+1}}.{{musicItem.title}}-{{musicItem.singerName}}</span>
            </li>
        </ul>
      </div>
    <div class="item">
    <!-- <img :src="itemList.picUrl" alt=""> -->
    <img :src="itemList.picUrl" alt=" ">
    </div>
  </div>
  </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      topList: [],
    };
  },

  created() {
    this.getTopList();
  },

  methods: {
    getTopList() {
      axios
        .get("/jsososo/top/category", {
          params: {
            showDetail: 1,
          },
        })
        .then((res) => {
          console.log(res.data.data);
          this.topList = res.data.data;
        })
        .catch((err) => {
          console.error(err);
        });
    },
    selectRankList(itemList){
      const id=itemList.topId;
      this.$router.push({path:`/ranklistdetail/${id}`})
    }
    
  },
};
</script>

<style scoped>
.rank-list{
    display: flex;
}
.item{
    width :50%;
}
.item>img{
    width: 100%;
}


</style>